<template>
    <div class="dialog-bg">
        <!-- v-if="visibleSlot"  :close-on-click-modal="false"  :visible.sync="visible" v-bind="attributes" v-on="on" :before-close="beClose" {{btnTxt[0]}} -->
        <el-dialog  class="el-dialog-cus" 
            :visible="dialogVisible"
            append-to-body  
            :before-close="beClose"
            v-on="dialogEvents()" 
            >
            <slot ></slot>
            <div slot="footer">
                <el-button @click="cancel" plain>取消</el-button>
                <el-button @click="confirm" type="primary" >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        inheritAttrs: false,
        props: {
            // config: Object,
            // autoClose: {
            //     type: Boolean,
            //     default: true,
            // },
            // beforeClose: {
            //     type: Function,
            //     default: () => { },
            // },
        },
        data() {
           // const { top = '20vh', width = '420px', title = '提示', center = false, btnTxt = ["取消", "确定"] } = this.config || {};
            return {
                dialogVisible: false,
                // attributes: {
                //     top,
                //     width,
                //     title,
                //     center,
                // },
                // btnTxt,
                 //on: this.getDialogEvents(),
                // visibleSlot: false,
            };
        },
        created() {
            console.log("created");
        },
        mounted() {
            console.log("mounted");
        },
        destroyed() {
            console.log("destroyed");
        },


        methods: {

            cancel(){
                console.log("click cancel");
                this.dialogVisible = false;
            },
            confirm(){//确认按钮
                console.log("click confirm");
                //this.dialogVisible = false;
                //提供回调，回调执行完毕关闭对话框
                let cancel = ()=> this.cancel();
                this.ok(cancel);
            },

            //对外调用事件
            open(ok){
                this.ok = ok;
                console.log('open : ' + this.dialogVisible );
                this.dialogVisible = true;
                return this.$nextTick();//作用，回调函数延迟到dom刷新后
            },
            close(){
                this.dialogVisible = false;
            },
            
            //右上角关闭 X
            beClose(done) {
                console.log("beforeClose: " + done);
                done();
                this.dialogVisible = false;
            },

            dialogEvents(){
                //console.log('dialogEvents...');
                let { close } = this.config || {}
                let events = {closed: () => 
                    {
                        this.visibleSlot = false;
                       // console.log("events...closed...");
                    }};
                events.closed();
                    

                //console.log(typeof this.beClose);
                   
                let newMethod =  this.beClose;

                let a = {a:20,open:newMethod}
                Object.assign(events, a);

              ///  console.log(events);



                 if (close && typeof close == 'function') {
                    Object.assign(events, {
                        close,
                    })
                }
                return events

            }

            // open(ok) {
            //     console.log("open");
            //     this.ok = ok;
            //     this.visible = true;
            //     this.visibleSlot = true;
            //     return this.$nextTick();
            // },
          
            // confirm() {
            //     console.log("confirm");
            //     let cancel = () => this.cancel();
            //     this.ok(cancel);
            //     this.autoClose && cancel();
            // },
            // beClose(done) {
            //     console.log("beforeClose");
            //     done();
            //     this.beforeClose();
            //     this.cancel();
            // },
            // getDialogEvents() {
            //     console.log('getDialogEvents...');
            //     // closed: () => this.visibleSlot = false是为了防止弹窗中的内容先于弹窗消失而造成弹窗在关闭时有一个突然向上缩小的情况
            //     let { close } = this.config || {}, events = { closed: () => this.visibleSlot = false };

            //     if (close && typeof close == 'function') {
            //         Object.assign(events, {
            //             close,
            //         })
            //     }

            //     return events
            // }
        }
    }
</script>

<style scoped>

    .dialog-bg{
        background: #000;
    }


  .el-dialog {
    display: block;
  } 

  /*
  .el-dialog {
    padding: 8px;
  }
  .el-dialog__title {
    font-weight: bold;
  }
  .el-dialog__header {
    padding: 20px 0 12px;
  }
  .el-dialog__headerbtn {
    top: 8px;
    right: 8px;
  }
  .el-dialog__body {
    padding: 0 24px;
  }
  .el-dialog__footer {
    padding: 20px;
    .el-button {
      padding: 8px 20px;
      & + .el-button {
        margin-left: 40px;
      }
    }
  } */
</style>